import {Plc, PlcAddress, PlcCheckbox, PlcDate, PlcInput, PlcNumber, PlcObject, PlcOv, PlcSelect, PlcTextarea, PlIcon, PlSelectOption, PlTablePro, useObjectOption, useTableOption} from "plain-design";
import React from "react";
import {designProPage} from "../designProPage";

export default designProPage(() => {

    const option = useTableOption({
        url: '/demo',
        // fill: true,
        editType: 'form',
    })

    const parentOption = useObjectOption({
        url: '/demo',
        render: () => <>
            <Plc title="编号id" field="id"/>
            <PlcInput title="文本normalText" field="normalText" fixed="left"/>
        </>
    })

    return () => <>
        <div className="pro-page-header">
            <h1>默认启用表单编辑而不是行内编辑</h1>
            <p>
                默认情况下，PlTablePro使用的是行内编辑，当前页面示例默认启用表单编辑功能
            </p>
        </div>
        <div className="pro-page-card">
            <PlTablePro option={option}>
                <Plc title="编号id" field="id" link hideInForm/>
                <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
                <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
                <PlcDate title="日期" field="dateVal"/>
                <PlcNumber title="计数count" field="count" required/>
                <PlcInput title="文本normalText" field="normalText" required fixed="left"/>
                <PlcNumber title="数字numberVal" field="numberVal"/>
                <PlcCheckbox title="复选框flag" field="flag"/>
                <PlcSelect title="下拉框selectVal" field="selectVal">
                    <PlSelectOption label="消费者" val="consumer">
                        <PlIcon icon="el-icon-s-custom" status="primary" style={{marginRight: '4px'}}/>
                        <span>消费者</span>
                    </PlSelectOption>
                    <PlSelectOption label="潜在客户" val="potential">
                        <PlIcon icon="el-icon-place" status="info" style={{marginRight: '4px'}}/>
                        <span>潜在客户</span>
                    </PlSelectOption>
                    <PlSelectOption label="门店" val="store">
                        <PlIcon icon="el-icon-s-shop" status="error" style={{marginRight: '4px'}}/>
                        <span>门店</span>
                    </PlSelectOption>
                </PlcSelect>
                <PlcTextarea title="长文本longText" field="longText"/>
                <PlcObject title="父对象" field="parentName" option={parentOption} map={{parentId: 'id', parentName: 'normalText'}}/>
                <PlcAddress title="省" field="provinceVal" province/>
                <PlcAddress title="市" field="cityVal" parentField="provinceVal" city/>
                <PlcAddress title="区" field="districtVal" parentField="cityVal" district/>
                <PlcOv title="选项值" field="ovVal" ov="promotion"/>
            </PlTablePro>
        </div>
    </>
})